/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header :title="title">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <div class="top_box">
        <div class="left">
          <p class="nums">
            <b>{{data.numbers && data.numbers.answered}}</b>道
          </p>
          <p class="name">完成提数</p>
        </div>
        <div class="right">
          <p class="nums">
            <b>{{data.ratio && Math.ceil(data.ratio.corrected)}}</b>%
          </p>
          <p class="name">正确率</p>
        </div>
      </div>
      <div class="middle_box">
        <div class="item" @click="goQueCollect({page: 'collect'})">
          <img src="../../assets/img/tiku/shouc.png" alt="试题收藏">
          <p>试题收藏</p>
        </div>
        <div class="item" @click="goQueCollect({page: 'failed', })">
          <img src="../../assets/img/tiku/cuotiben.png" alt="错题本">
          <p>错题本</p>
        </div>
        <div class="item" @click="goDoCollect">
          <img src="../../assets/img/tiku/jilu.png" alt="做题记录">
          <p>做题记录</p>
        </div>
      </div>
      <div class="bottom_box">
        <flexbox style="margin-bottom: 15px;">
          <flexbox-item>
            <div class="item" @click="goQus">
              <img src="../../assets/img/tiku/shaizi.png" alt="做题记录">
              <b>随机抽题</b>
              <p></p>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="item" @click="goHisQus('chapter')">
              <img src="../../assets/img/tiku/zhangjie.png" alt="做题记录">
              <b>章节训练</b>
              <p></p>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="item" @click="goHisQus('dayly')">
              <img src="../../assets/img/tiku/meiri.png" alt="做题记录">
              <b>每日一练</b>
              <p></p>
            </div>
          </flexbox-item>
        </flexbox>
        <flexbox>
          <flexbox-item>
            <div class="item" @click="goHisQus('plan')">
              <img src="../../assets/img/tiku/shijuan.png" alt="做题记录">
              <b>模拟试卷</b>
              <p></p>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="item" @click="goHisQus('calendar')">
              <img src="../../assets/img/tiku/zhenti.png" alt="做题记录">
              <b>历年真题</b>
              <p></p>
            </div>
          </flexbox-item>
          <flexbox-item>
            <!-- <div class="item" @click="goHisQus('plan')">
              <img src="../../assets/img/tiku/jiangz.png" alt="做题记录">
              <b>考试计划</b>
              <p></p>
            </div> -->
          </flexbox-item>
        </flexbox>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import MescrollVue from "mescroll.js/mescroll.vue";
import { Flexbox, FlexboxItem } from "vux";
import { reqGetExamCount } from "../../api/index.js";
export default {
  data() {
    return {
      data: {},
      title: null,
      mescroll: {},
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false
      }
    };
  },
  mounted(){
    let s =  JSON.parse(localStorage.getItem('selectedProject'));
    if(s && s.name){
      this.title= s.name;
    }
    this.initData();
  },
  methods: {
    async initData() {
      let result = await reqGetExamCount();
      if (result.code === 1) {
        this.data = result.data;
      } else {
        this.$vux.toast.show(result.msg);
      }
    },
    // 前往试题收藏
    goQueCollect(data) {
      this.$router.push({ path: "/queRecord", query: data });
    },
    // 前往做题记录
    goDoCollect() {
      this.$router.push({ path: "/doRecord" });
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback(mescroll) {
      setTimeout(function() {
        mescroll.endSuccess();
      }, 1000);
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    goHisQus(data) {
      this.$router.push({ path: "/hisQus", query: { type: data } });
    },
    goQus() {
      this.$router.push({ path: "/question", query: { type: "exercise" } });
    }
  },
  components: { Header, MescrollVue, Flexbox, FlexboxItem }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
}

.main {
  width: 100%;
  .be-full();
  height: calc(~"100% - 46px");
  box-sizing: border-box;
  padding: 20px 15px;
  overflow: auto;
}

.top_box,
.middle_box,
.bottom_box {
  padding: 20px 30px;
  background: @white;
  border-radius: 8px;
  margin-bottom: 20px;
  .box-shadow();
}

// 146
.top_box {
  height: 126px;
  box-sizing: border-box;
  .mix-flex-center();
  .left,
  .right {
    flex: 1;
    .mix-flex-center();
    flex-direction: column;
    .nums {
      font-size: 14px;
      b {
        font-size: 40px;
      }
    }
    .name {
      font-size: 14px;
      color: @font-secondary;
    }
  }
  .left {
    border-right: 1px solid @border-base;
    .nums {
      b {
        color: @primary;
      }
    }
  }
  .right {
    .nums {
      b {
        color: @red;
      }
    }
  }
}

// 137
.middle_box {
  height: 117px;
  box-sizing: border-box;
  .mix-flex-center();
  .item {
    flex: 1;
    .mix-flex-center();
    flex-direction: column;
    img {
      width: 40px;
      height: 40px;
    }
    p {
      font-size: 14px;
      margin-top: 10px;
      color: @font-primary;
    }
  }
}

.bottom_box {
  margin-bottom: 0px;
  // height: calc(~"100% - 283px");
  .item {
    .mix-flex-center();
    flex-direction: column;
    img {
      width: 40px;
      height: 40px;
    }
    p {
      font-size: 8px;
      color: @font-secondary;
      height: 19px;
    }
    b {
      font-size: 14px;
    }
  }
}
</style>
